
<template>
  <div class="header">Member</div>
  <div class="media-panel-wrapper">
    <div style="border-radius: 10px ;background: #fff; ;   box-sizing: border-box; 
padding: 25px;overflow: hidden;height: 100%;box-shadow:1px 0 20px #afafaf ;">
      <el-table :data="Data" row-key="user_id" align="center" class="media-table"
        :header-cell-style="{ color: 'black', fontSize: '15px', height: '30px', lineHeight: '30px' }" el-table-column
        :rowClassName="(record, index) => ((index % 2) === 0 ? 'table-striped' : null)" :scroll="{ x: '100%', y: 600 }">
        <el-table-column type="selection" width="30" />
        <el-table-column prop="username" label="用户名" width="140">
          <template #default="scope">
            <el-input size="small" v-if="editableData[scope.row.user_id]"
              v-model="editableData[scope.row.user_id].username" />
            <div v-else>{{ scope.row.username }}</div>
          </template>
        </el-table-column>
        <el-table-column label="修改用户名" width="110">
          <template #default="scope">
            <span v-if="editableData[scope.row.user_id]">
              <el-tooltip class="box-item" effect="dark" content="保存" placement="left">
                <el-icon class="ml15" style="color: #28d445;margin-left:15px;" @click="save(scope.row)"><Select /></el-icon>
              </el-tooltip>
              <el-tooltip class="box-item" effect="dark" content="取消" placement="right">
                <el-icon class="ml15" style="color: #e70102;margin-left:15px;"
                  @click="() => delete editableData[scope.row.user_id]">
                  <CloseBold />
                </el-icon>
              </el-tooltip>
            </span>
            <el-icon v-else style="color: blue;cursor: pointer;margin-left:30px;" @click="edit(scope.row)">
              <EditPen />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="user_type" label="用户类型" width="150" />
        <el-table-column prop="workspace_name" label="工作区间" width="150" />
        <el-table-column prop="mqtt_username" label="通讯账号" width="150" />

        <el-table-column prop="mqtt_password" label="通讯密码" width="`150`" />
        <el-table-column prop="create_time" label="创建时间" width="180" />
      </el-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
//   import { TableState } from 'ant-design-vue/lib/table/interface'
import { onMounted, reactive, Ref, ref, UnwrapRef } from 'vue'
import { IPage } from '@/api/http/type'
import { getAllUsersInfo, updateUserInfo } from '@/api/manage'
import { ELocalStorageKey } from '@/types'
//   import { EditOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue'

export interface Member {
  user_id: string
  username: string
  user_type: string
  workspace_name: string
  create_time: string
  mqtt_username: string
  mqtt_password: string
}


const Data = ref<Member[]>([])

const editableData: UnwrapRef<Record<string, Member>> = reactive({})


const rowSelection = {
  onChange: (selectedRowKeys: (string | number)[], selectedRows: []) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  onSelect: (record: any, selected: boolean, selectedRows: []) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected: boolean, selectedRows: [], changeRows: []) => {
    console.log(selected, selectedRows, changeRows)
  },
}
type Pagination = TableState['pagination']

const body: IPage = {
  page: 1,
  total: 0,
  page_size: 50
}
const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId)!

onMounted(() => {
  getAllUsers(workspaceId, body)
})

function refreshData(page: Pagination) {
  getAllUsers(workspaceId, body)
}

function getAllUsers(workspaceId: string, page: IPage) {
  getAllUsersInfo(workspaceId, page).then(res => {
    const userList: Member[] = res.data.list
    Data.value = userList

  })
}

function edit(record: Member) {
  editableData[record.user_id] = record

}

function save(record: Member) {
  updateUserInfo(workspaceId, record.user_id, editableData[record.user_id]).then(res => {
    if (res.code !== 0) {
      ElMessage.error(res.message)
    }
    else {
      refreshData(50)
    }
  })
  delete editableData[record.user_id]
}

</script>
<style lang="scss">
.table {
  background-color: white;
  height: 100%;
  width: 100%;

}
.media-panel-wrapper {
    height: 92%;
    width: 70%;
    box-sizing: border-box;

    padding: 25px;
    .media-table {
      height: 93%;
      margin-top: 10px;

    }
    .action-area {
      color: $primary;
      cursor: pointer;
    }
  }
  .header {
    width: 100%;
    height: 60px;
    background: #fff;
    box-sizing: border-box;
    padding: 16px;
    font-size: 20px;
    font-weight: bold;
    text-align: start;
    color: #000;
  }
.table-striped {
  background-color: #f7f9fa;

}

.ant-table {
  border-top: 1px solid rgb(0, 0, 0, 0.06);
  border-bottom: 1px solid rgb(0, 0, 0, 0.06);
}

.ant-table-tbody tr td {
  border: 0;
}

.ant-table td {
  white-space: nowrap;
}

.ant-table-thead tr th {
  background: white !important;
  border: 0;
}

th.ant-table-selection-column {
  background-color: white !important;
}

.ant-table-header {
  background-color: white !important;
}

.ml15 {
  cursor: pointer
}
</style>
  